<alert class="alert-msg" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}
</alert>

<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">1.选择类目</h3>
    </div>
    <div class="box-body" style="display: flex; flex-flow: column">
        <!--这里根据类目动态渲染-->
        <div style="display: flex; flex-flow: row;height: 200px">
            <div class="col-sm-6 treeview pre-scrollable">
                一级类目选择
                <ul class="treeview-menu treeview-menu menu-open">
                    <li style="padding: 5px;list-style:none" ng-repeat="forest in rootForestList">
                        <input type="checkbox" ng-model="test"
                               ng-change="rootCategoryChange(forest.id)">
                        <span style="padding: 10px">{{forest.title}} </span>
                    </li>
                </ul>
            </div>
            <div class="col-sm-6 pre-scrollable" ng-show="rootCategory">
                二级类目选择
                <ul>
                    <li style="padding: 5px;list-style:none"
                        ng-repeat="childForest in childForestList | filter:{parentId: rootCategory}">
                        <input type="checkbox" ng-model="test"
                               ng-change="childCategoryChange(childForest.id)">
                        <span style="padding: 10px"> {{childForest.title}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<form class="form-horizontal" ng-show="childCategory">
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title">2. 商品基本信息</h3>
        </div>
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">标题</label>

                <div class="col-sm-4">
                    <input type="text" class="form-control" ng-model="currentItem.title">
                </div>

                <label class="col-sm-2 control-label">描述</label>

                <div class="col-sm-4">
                    <textarea type="text" class="form-control" ng-model="currentItem.itemDesc"/>
                </div>

            </div>

            <div class="row form-group">
                <div class="col-xs-2" style="display: flex; flex-flow: row">
                    <label class="col-sm-2 control-label">原价</label>
                    <input type="text" class="col-sm-10 form-control" ng-model="currentItem.price">
                </div>

                <div class="col-xs-2" style="display: flex; flex-flow: row">
                    <label class="col-sm-2 control-label">会员价</label>
                    <input type="text" class="form-control" ng-model="currentItem.vipPrice">
                </div>

                <div class="col-xs-2" style="display: flex; flex-flow: row">
                    <label class="col-sm-3 control-label">邮费</label>
                    <input type="text" class="form-control" ng-model="currentItem.postage">
                </div>
                <div class="col-xs-2" style="display: flex; flex-flow: row">
                    <label class="col-sm-3 control-label">佣金</label>
                    <input type="text" class="form-control" ng-model="currentItem.commission">
                </div>

                <div class="col-xs-2" style="display: flex; flex-flow: row">
                    <label class="col-sm-3 control-label">返现</label>
                    <input type="text" class="form-control" ng-model="currentItem.cashBack">
                </div>
            </div>

            <div class="form-group">
                <button style="margin-left: 50px" class="btn btn-primary" ng-click="addImage()">宝贝主图</button>
                <img src="{{currentItem.pic}}" ng-show="currentItem.pic" style="width: 50px"/>
                <input type="text" ng-model="currentItem.pic" hidden>

                <button class="btn btn-primary" ng-click="addOtherImage()" style="margin-left: 50px">其他图片</button>
                <img src="{{descPic}}" style="width: 50px" ng-repeat="descPic in currentItem.descPicLists">
                </img>

            </div>

        </div>

    </div>

    <div class="row form-group">
        <div class="col-xs-6 box box-info" ng-show="childCategory" style="margin-left: 15px">
            <div class="box-header with-border">
                <h3 class="box-title">3. 商品sku信息</h3>
            </div>
            <div class="box-body">
                <!--这里根据类目动态渲染,这里好复杂，要让运营填写属性值，由输入框的，由选择列表的等待，先搞成简单的几个支持一下好了-->
                <div ng-repeat="(key, valueList) in forestPropertyValueList " style="margin: 10px">
                    <span>{{key}}</span>
                    <ul class="treeview-menu treeview-menu menu-open">
                        <li style="padding: 5px;list-style:none;float:left;" ng-repeat="propertyValue in valueList">

                            <input type="checkbox" ng-model="test"
                                   ng-change="skuChange(key, $index)">
                            <span style="padding: 10px">{{propertyValue.value}} </span>
                        </li>
                    </ul>
                    <br/>
                </div>

                <!--动态渲染table，table在sku实时变动过程中变化比较难搞，改为加button监听事件搞-->
                <content-table forest-property-value-list="forestPropertyValueList"
                               sku-list="skuList"
                               sku-stock-change="skuStockChange()"
                               sku-image-change="skuImageChange(index)"></content-table>


                商品数量： <input type="text" readonly ng-model="currentItem.stock">

            </div>
        </div>

        <div class="col-xs-5 box box-info" ng-show="childCategory" style="margin-left: 60px">
            <div class="box-header with-border">
                <h3 class="box-title">4. 商品其他属性信息</h3>
            </div>
            <div class="box-body">
                <!--这里根据类目动态渲染,这里好复杂，要让运营填写属性值，由输入框的，由选择列表的等待，先搞成简单的几个支持一下好了-->
                <div ng-repeat="(key, valueList) in otherPropertyValueMap " style="margin: 10px">
                    <span>{{key}}</span>
                    <ul class="treeview-menu treeview-menu menu-open">
                        <li style="padding: 5px;list-style:none;float:left;" ng-repeat="propertyValue in valueList">

                            <input type="radio" name="{{key}}" ng-model="test1"
                                   ng-click="otherPropertyChange(key, $index)" id="{{propertyValue.value}}">
                            <span style="padding: 10px">{{propertyValue.value}} </span>
                        </li>
                    </ul>
                    <br/>
                </div>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary" ng-click="addItem()" ng-show="!isAdding">
        发布
    </button>

</form>
